<template>
  <view>
    <view class="wrap">
      <view class="u-tabs-box">
        <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change"
          :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
      </view>
      <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="hul" v-if="miaoshagoods.endmiaoshalist.length!==0">
                   <u-notice-bar mode="horizontal" :list="listend" type="none"></u-notice-bar>
              <view class="hli" v-for="(item,index) in miaoshagoods.endmiaoshalist" :key="index">
                <view class="hleft">
                  <image :src="item.image_url" mode=""></image>
                  <view class="overlay">
                    <view class="time1">
                      <text class="time1__item"> 已结束</text>
                    </view>

                  </view>
                </view>
                <view class="hright">
                  <view class="htitle">
                    {{item.name}}
                  </view>
                  <view class="schedule">
                    <u-line-progress height="20"  :percent="item.percent" activeColor="#666666"
                      :striped-active="true"></u-line-progress>
                  </view>
                  <view class="prices">
                    <view class="price" style="color:#666666 ;">
                      ￥{{item.unit_price}}
                    </view>
                    <view class="delprice">
                      ￥{{item.discount_price}}
                    </view>
                  </view>
                  <view class="hbutton">
                    <u-button color="red" size="mini" :plain="true" shape="circle" @click="tiaozhuanend(item.id)">
                      已结束
                    </u-button>
                  </view>
                </view>

              </view>
            </view>
            <!-- <u-empty text="暂无结束数据" mode="list"></u-empty> -->
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
         
            <view class="hul" v-if="miaoshagoods.miaoshalist.length!==0">
                 <u-notice-bar mode="horizontal" :list="listing" type="error"></u-notice-bar>
              <view class="hli" v-for="(item,index) in miaoshagoods.miaoshalist" :key="index">

                <view class="hleft">
                  <image :src="item.image_url" mode=""></image>
                  <view class="overlay">
                    <u-count-down :timestamp="item.timestamp" @change="onChange">
                      <view class="time1">
                        <text class="time1__item">{{ timeData.days>=10?timeData.days:'0'+timeData.days }}天</text>
                        <text class="time1__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}:</text>
                        <text
                          class="time1__item">{{ timeData.minutes>=10?timeData.minutes:'0'+timeData.minutes}}:</text>
                        <text class="time1__item">{{timeData.seconds>=10?timeData.seconds:'0'+timeData.seconds}}
                          结束</text>
                      </view>
                    </u-count-down>
                  </view>
                </view>
                <view class="hright">
                  <view class="htitle">
                    {{item.name}}
                  </view>
                  <view class="schedule">
                    <u-line-progress height="20"  :percent="item.percent" activeColor="#ff0000"
                      :striped-active="true"></u-line-progress>
                  </view>
                  <view class="prices">
                    <view class="price">
                      ￥{{item.unit_price}}
                    </view>
                    <view class="delprice">
                      ￥{{item.discount_price}}
                    </view>
                  </view>
                  <view class="hbutton">
                    <u-button :custom-style="customStyle" color="red" size="mini" :plain="true" shape="circle"
                      @click="tiaozhuan(item.id)">
                      立即秒杀
                    </u-button>
                  </view>
                </view>

              </view>
            </view>
            <u-empty text="暂无正在秒杀数据" mode="list" v-else></u-empty>
          </scroll-view>
        </swiper-item>
        <swiper-item class="swiper-item">
          <scroll-view scroll-y style="height: 100%;width: 100%;">
            <view class="hul" v-if="miaoshagoods.wksmiaoshalist.length!==0">
              <u-notice-bar mode="horizontal" :list="listwks"></u-notice-bar>
              <view class="hli" v-for="(item,index) in miaoshagoods.wksmiaoshalist" :key="index">
                <view class="hleft">
                  <image :src="item.image_url" mode=""></image>
                  <view class="overlay">
                    <u-count-down :timestamp="item.startimestamp" @change="onChangewks">
                      <view class="time1">
                        <text class="time1__item">{{ timeDatawks.days>=10?timeDatawks.days:'0'+timeDatawks.days }}天</text>
                        <text class="time1__item">{{ timeDatawks.hours>=10?timeDatawks.hours:'0'+timeDatawks.hours}}:</text>
                        <text
                          class="time1__item">{{ timeDatawks.minutes>=10?timeDatawks.minutes:'0'+timeDatawks.minutes}}:</text>
                        <text
                          class="time1__item">{{timeDatawks.seconds>=10?timeDatawks.seconds:'0'+timeDatawks.seconds}}开始</text>
                      </view>
                    </u-count-down>
                  </view>
                </view>
                <view class="hright">
                  <view class="htitle">
                    {{item.name}}
                  </view>
                  <view class="schedule">
                    <u-line-progress height="20" :percent="item.percent" activeColor="#ffaa00"
                      :striped-active="true"></u-line-progress>
                  </view>
                  <view class="prices">
                    <view class="price" style="color:#ffaa00;">
                      ￥{{item.unit_price}}
                    </view>
                    <view class="delprice">
                      ￥{{item.discount_price}}
                    </view>
                  </view>
                  <view class="hbutton">
                    <u-button :custom-style="customStylews" color="red" size="mini" :plain="true" shape="circle" @click="tiaozhuanwks(item.id)">
                      即将开始
                    </u-button>
                  </view>
                </view>

              </view>
            </view>
              <u-empty text="暂无数据" mode="list" v-else></u-empty>
          </scroll-view>
        </swiper-item>

      </swiper>
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    ref,
    getCurrentInstance
  } from 'vue'
  const list = ref([{
      name: '已结束'
    },
    {
      name: '进行中'
    },
    {
      name: '未开始'
    }
  ])
  const {
    proxy
  } = getCurrentInstance()
  const current = ref(0)
  const swiperCurrent = ref(0)
  const dx = ref(0)
  import {
    goodsStore
  } from "../../store/goods.js"

  const goodStore = goodsStore()
  const {
    miaoshagoods
  } = goodStore
  //获取秒杀数据
  goodStore.getmiaoshagoods()
  //立即砍价秒杀样式
  const customStyle = reactive({
    marginTop: '60rpx',
    color: '#ff4444',
    fontSize: '25rpx'
  })
  const customStylews = reactive({
    marginTop: '60rpx',
    color: '#ffaa00',
    fontSize: '25rpx'
  })
    //正在进行的数据
  const listing = ref([])
  const timeData = ref({})
  function onChange(e) {
    if(e.days===0 & e.hours===0 & e.minutes===0 &  e.seconds===0 ){
      if(miaoshagoods.status!=='padding')
      goodStore.getmiaoshagoods()
    }
    timeData.value = e,
      listing.value = ['距离活动结束仅剩',
        `${timeData.value.days>=10?timeData.value.days:'0'+timeData.value.days}天${timeData.value.hours>=10?timeData.value.hours:'0'+timeData.value.hours}小时${timeData.value.minutes>=10?timeData.value.minutes:'0'+timeData.value.minutes}分钟${timeData.value.seconds>=10?timeData.value.seconds:'0'+timeData.value.seconds}秒`,
      ]
  }
    //未开始进行的数据
  const listwks = ref([])
  const timeDatawks = ref({})
  function onChangewks(e) {
    if(e.days===0 & e.hours===0 & e.minutes===0 &  e.seconds===0 ){
      if(miaoshagoods.status!=='padding')
      goodStore.getmiaoshagoods()
    }
    timeDatawks.value = e
      listwks.value = ['距离活动开始开始仅剩',
        `${timeDatawks.value.days>=10?timeDatawks.value.days:'0'+timeDatawks.value.days}天${timeDatawks.value.hours>=10?timeDatawks.value.hours:'0'+timeDatawks.value.hours}小时${timeDatawks.value.minutes>=10?timeDatawks.value.minutes:'0'+timeDatawks.value.minutes}分钟${timeDatawks.value.seconds>=10?timeDatawks.value.seconds:'0'+timeDatawks.value.seconds}秒`,
      ]
  }
  //已结束
    const   listend = ref(['活动已经结束','期待下次活动'])

  //跳转页面
  function tiaozhuan(goodid) {
    uni.navigateTo({
      url: `/subPack/miaoshagoods/miaoshagoods?goods_id=${goodid}`
    })
  }
  //跳转已结束
  function tiaozhuanend(goodid) {
    uni.navigateTo({
      url: `/subPack/endmiaoshagoods/endmiaoshagoods?goods_id=${goodid}`
    })
  }
  //跳转未开始
  function tiaozhuanwks(goodid) {
    uni.navigateTo({
      url: `/subPack/wksmiaoshagoods/wksmiaoshagoods?goods_id=${goodid}`
    })
  }
  // tab栏切换
  function change(index) {
    swiperCurrent.value = index
  }

  function transition({
    detail: {
      dx
    }
  }) {
    proxy.$refs.tabs.setDx(dx);
  }

  function animationfinish({
    detail: {
      current
    }
  }) {
    proxy.$refs.tabs.setFinishCurrent(current);
  }
</script>

<style>
  /* #ifndef H5 */
  page {
    height: 100%;
    background-color: #f2f2f2;
  }

  /* #endif */
</style>

<style lang="scss" scoped>
  .wrap {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--window-top));
    width: 100%;
  }

  .swiper-box {
    flex: 1;
  }

  .swiper-item {
    height: 100%;
  }

  .time1 {
    color: #ffffff;
    text-align: center;

    &__item {
      color: #ffffff;
      font-size: 24rpx;

    }
  }

  .hul {
    .hli:nth-child(n+2) {
      margin-top: 20rpx;
    }

    .hli {
      display: flex;
      border-radius: 10rpx;
      box-shadow: 2rpx 2rpx 10rpx 2rpx #dadada;

      .hleft {
        margin: 10rpx;
        height: 220rpx;
        position: relative;

        image {
          border-radius: 10rpx;
          width: 220rpx;
          height: 220rpx;
        }

        .overlay {
          border-radius: 0 0 10rpx 10rpx;
          position: absolute;
          top: 80%;
          left: 0;
          width: 100%;
          height: 20%;

          background-color: rgba(0, 0, 0, 0.5);
          /* 设置遮罩层颜色和透明度 */
        }
      }

      .hright {
        position: relative;
        padding-right: 50rpx;
        padding-left: 20rpx;

        .htitle {
          margin-top: 30rpx;
          font-size: 32rpx;
          color: #353535;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .schedule {
          margin-top: 10rpx;
          width: 300rpx;
        }

        .prices {
          position: absolute;
          bottom: 20rpx;

          .price {
            display: inline-block;
            font-size: 35rpx;
            color: #f23030;
          }

          .delprice {
            display: inline-block;
            margin-left: 10rpx;
            left: 110rpx;
            font-size: 25rpx;
            text-decoration: line-through;
            color: #999999;
          }
        }

        .hbutton {
          position: absolute;
          bottom: 20rpx;
          right: 20rpx;
        }
      }
    }
  }
</style>